//处理数据渲染
let stateAll = false

function date() {
    let data = JSON.parse(localStorage.getItem('date'))
    let str = `
            <tr class="firsttr"> 
                <th><input type="checkbox" name="all" id="" ${stateAll?'checked':''}>全选</th>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
           `
    data.forEach(element => {
        let newstr = ` <tr>
                <td><input type="checkbox" name="chex" id="" ${element.state?'checked':''} dateid='${element.resultInfo.id}'></td>
                <td>	
                    <img src="${element.resultInfo.picture}" alt="">
                    <span> ${element.resultInfo.shop}  </span>      </td>
                <td>${(element.resultInfo.price).toFixed(2)}元</td>
                <td>
                    <button  dateid='${element.resultInfo.id}' class='-'  ${element.num ==0?'disabled':''}>-</button>
                    <input type="text" value="${element.num}">
                    <button  dateid='${element.resultInfo.id}'  class='+'>+</button>
                </td>
                <td>${(Number(element.resultInfo.price)*Number(element.num)).toFixed(2)}元</td>
                <td><div class='x'  dateid='${element.resultInfo.id}' >x</div></td>
            </tr>`
        str += newstr
    });
    let table1 = document.querySelector('table')
    table1.innerHTML = str
    //判断全选
    function isqunxuan() {
        let cartListStr = localStorage.getItem('date')
        let cartList = JSON.parse(cartListStr) || []
        let is = cartList.every(function (item) {
            return item.state == true
        })
        if (is) {
            stateAll = true
        } else {
            stateAll = false
        }
    }
    isqunxuan()
}
date()
//全选功能
function quanxuan() {
    let table1 = document.querySelector('table')
    table1.addEventListener('click', function (e) {
        e = e || window.event
        let target = e.target || e.srcElement
        if (target.getAttribute('name') == 'all') {
            stateAll = !stateAll
            let cartListStr = localStorage.getItem('date')
            let cartList = JSON.parse(cartListStr) || []
            cartList.forEach(item => item.state = stateAll)
            localStorage.setItem('date', JSON.stringify(cartList))
            date()
            jishu()
            suanzj()
        }
        //单选框
        if (target.getAttribute('name') == 'chex') {
            let id = target.getAttribute('dateid')
            let cartListStr = localStorage.getItem('date')
            let cartList = JSON.parse(cartListStr) || []
            let cartProduct = cartList.find(item => item.resultInfo.id == id)
            cartProduct.state = !cartProduct.state
            stateAll = cartList.every(item => item.state == true)
            localStorage.setItem('date', JSON.stringify(cartList))
            date()
            jishu()
            suanzj()
        }
    })


}
quanxuan()
// 加减事件
function jiajian() {
    let table1 = document.querySelector('table')
    table1.addEventListener('click', function (e) {
        e = e || window.event
        let target = e.target || e.srcElement
        let cartListStr = localStorage.getItem('date')
        let productList = JSON.parse(cartListStr) || []
        if (target.getAttribute('class') == '+') {
            let id = target.getAttribute('dateid')
            let product = productList.find(item => item.resultInfo.id == id)
            product.num++
            localStorage.setItem('date', JSON.stringify(productList))
            date()
            suanzj()
        }

        if (target.getAttribute('class') == '-') {
            let id = target.getAttribute('dateid')
            let product = productList.find(item => item.resultInfo.id == id)
            product.num--
            localStorage.setItem('date', JSON.stringify(productList))
            date()
            suanzj()
        }
    })
}
jiajian()
//勾选计数
function jishu() {
    let tmp = 0
    let jiansu1 = document.querySelector('#jiansu')
    let cartListStr = localStorage.getItem('date')
    let productList = JSON.parse(cartListStr) || []
    productList.forEach(function (item) {
        if (item.state == true) {
            tmp++
        }
    })
    console.log(tmp)
    console.log(jiansu1)
    jiansu1.innerHTML = `${tmp}`
    date()
}
jishu()
//算总价
function suanzj() {
    let cartListStr = localStorage.getItem('date')
    let productList = JSON.parse(cartListStr) || []
    let heji = document.querySelector('#heji')
    let zjg = 0
    productList.forEach(function (item) {
        if (item.state == true) {
            zjg += item.num * item.resultInfo.price
        }
    })
    console.log(zjg)
    heji.innerHTML = `${zjg.toFixed(2)}`
    date()
}
suanzj()
//删除
function shanchu() {
    let table1 = document.querySelector('table')
    table1.addEventListener('click', function (e) {
        e = e || window.event
        let target = e.target || e.srcElement
        if (target.getAttribute('class') == 'x') {
            console.log('x')
            let id = target.getAttribute('dateid')
            let cartListStr = localStorage.getItem('date')
            let productList = JSON.parse(cartListStr) || []
            let indef = productList.filter(function (item) {
                return item.resultInfo.id != id
            })
            // productList.splice(productList.indexof(indef),1)
            localStorage.setItem('date', JSON.stringify(indef))
            jishu()
            suanzj()
            date()
            alert('删除成功！')
        }
    })
}
shanchu()